<template>
  <view class="login_box">

    <view class="login_header">
      <view class="img-box">
        <view class="imgbox">
          <image class="titileImgae" src="../../../static/images/349icon.png" style="width: 214rpx; height: 138rpx;">
          </image>
        </view>
        <view class="wenzi">登录</view>
      </view>
    </view>

    <view class="new-login-box">
      <view class="new-title">
        <text :class="colorid == 0 ? 'new-title-text active' : 'new-title-text'" @click="changecolor(0)">个人登录</text>
        <text :class="colorid == 1 ? 'new-title-text active' : 'new-title-text'" @click="changecolor(1)"
          style="margin-left: 54rpx;">项目登录</text>
      </view>
      <view class="new-myinput">
        <view class="new-myinput-head">
          <image v-if="colorid==0" src="/static/images/组2.png" mode="" style="width: 36rpx; height: 36rpx;"></image>
          <image v-else src="/static/images/count.png" mode="" style="width: 36rpx; height: 36rpx;"></image>
          <text style="font-size: 28rpx; margin-left: 10rpx;">{{colorid==0?'个人账号':'项目账号'}}</text>
        </view>
        <view class="new-myinput-but" style="padding-bottom: 10rpx;">
          <uni-easyinput class="myinput"  v-model="baseFormData.username" placeholderStyle="font-size: 28rpx;"
            :placeholder="colorid==0?'请输入您的手机号':'请输入您的项目账号'" type="text" style="background: none;" @confirm="sub"></uni-easyinput>
        </view>
      </view>
      <view class="new-myinput" style="margin-top: 44rpx;">
        <view class="new-myinput-head">
          <image src="/static/images/password.png" mode="" style="width: 36rpx; height: 36rpx;"></image>
          <text style="font-size: 28rpx; margin-left: 10rpx;">密码</text>
        </view>
        <view class="new-myinput-but" style="margin-bottom: 50rpx;">
          <uni-easyinput class="mypassinput" placeholderStyle="font-size: 28rpx;" v-model="baseFormData.password"
            placeholder="请输入您的密码" type="password" @confirm="sub"></uni-easyinput>
        </view>
      </view>
      <view class="new-login-but" v-if="colorid != 1" style="margin-bottom: 30rpx;">
        <label class="radio">
          <radio v-model="queren" :checked="queren" @click="ischeck(queren)" color=" #055DFE" />
        </label>
        <text>阅读并同意</text><text @tap="openPrivacyContract" style="color: #1064fe;">《用户协议》</text><text>及</text><text
          @tap="openPrivacyContract" style="color: #1064fe;">《隐私保护规范》</text>
      </view>
      <view class="forget" v-if="colorid != 1 && false" @click="toreset"
        style="color: #1064fe; font-size: 24rpx; margin-left: 44rpx; padding-top: 22rpx; margin-bottom: 50rpx;">
        忘记密码
      </view>
    </view>

    <!-- 隐私展示 -->
    <view v-if="showPrivacy" class="privacy">
      <view class="content">
        <view class="title">用户隐私保护指引</view>
        <view class="des">
          感谢您选择使用庐易用工小程序，我们非常重视您的个人信息安全和隐私保护。使用我们的产品前，请您仔细阅读“
          <text class="link" @tap="openPrivacyContract">{{privacyContractName}}</text>”，
          如您同意此隐私保护指引,请点击同意按钮,开始使用此小程序,我们将尽全力保护您的个人信息及合法权益，感谢您的信任！<br />
        </view>
        <view class="btns">
          <button class="item reject" @click="exitMiniProgram">拒绝</button>
          <button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
            @agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
        </view>
      </view>
    </view>

    <button class="submitSalery" @click="sub">登录</button>

  </view>
</template>

<script>
  import * as faceapi from "face-api.js";
  export default {
    data() {
      return {
        privacyContractName: '用户协议及隐私保规范',
        resolvePrivacyAuthorization: null,
        showPrivacy: false,

        alignmentFormData: {},
        baseFormData: {
          // username: 'admin',
          // password: '123456',
          // username: '10009', // 劳资专员个人
          // password: '123456',
          username: '13060871354', // 包工头
          password: '123456',
          // username: '17870605918', // 劳资专员项目
          // password: '123456',
          // username: '17794891753', // 劳工
          // password: '123456',
          // username: 'test1', // 劳资专员项目
          // password: '123456',
          // username: '13060871354', // 劳资专员项目
          // password: '123456',
        },
        isshowpass: true,
        colorid: 0,
        queren: false,
        countType: 3,
        timer: null
      }
    },
    methods: {
      openPrivacyContract(){
        wx.openPrivacyContract({
          success: (res) => {
            console.log('成功打开隐私协议',res);
          }, // 打开成功
          fail: (err) => {
            console.log('打开用户隐私协议失败',err);
          }, // 打开失败
          complete: () => {}
        })
      },
      
      sub() {
        if (!this.queren && this.colorid == 0) {
          uni.showToast({
            title: '请勾选并阅读协议',
            icon: 'none'
          })
          return
        }
        if (this.baseFormData.username.length == 0 || this.baseFormData.password.length == 0) {
          uni.showToast({
            title: '请输入账号或密码',
            icon: 'none'
          })
          return
        }

        uni.showLoading({})
        uni.$post(this.path + '/loginByProgram', {
          mobilePhone: this.baseFormData.username,
          userName: this.baseFormData.username,
          userPwd: this.baseFormData.password,
          uuid: '',
          verCode: '',
          countType: '劳资项目',
        }).then(res => {
          console.log('login');
          console.log(res);
          if (res.code == 200) {
            uni.setStorageSync('token', res.data)
            // 登录成功之后 利用token 获取角色身份
            this.getusertype()
          } else if (res.code == 503) {
            uni.hideLoading()
            clearTimeout(this.timer)
            uni.showToast({
              title: '账号或密码错误!',
              icon: 'error'
            })
          } else {
            uni.hideLoading()
            // clearTimeout(this.timer)
          }
        })

      },

      getusertype() {
        clearTimeout(this.timer)
        uni.$get(this.path + '/getInfo').then(res => {
          // 5劳资专员-个人 4劳工 3包工头 2劳资专员-项目 1管理员
          console.log('getinfo');
          console.log(res);
          if (res.code != 200) {
            uni.hideLoading()
            clearTimeout(this.timer)
            uni.showToast({
              title: '个人信息获取失败 请重试',
              icon: 'none'
            })
            return
          }
          clearTimeout(this.timer)
          uni.setStorageSync('nickName', res.data.user.nickName) //角色姓名
          uni.setStorageSync('userMobile', res.data.user.mobile) //角色电话
          uni.setStorageSync('userId', res.data.user.id) //角色id
          uni.setStorageSync('userCode', res.data.user.documentNumber) // 角色身份证号码
          let personCard = res.data.user.documentNumber
          uni.$post(this.path + '/person/getPersonByCard',
            personCard
          ).then(res => {
            console.log(res);
            console.log(res.data.admitGuid);
            console.log('人员头像唯一值',res.data.admitGuid);
            uni.setStorageSync('admitGuid',res.data.admitGuid) //这个为人员头像唯一值
          })

          if (res.data.project != null) {
            uni.setStorageSync('projectName', res.data.project.projectName) //项目名称
          }

          let permission = res.data.user.permissionFlag
          // 无身份判断
          if (res.data.user.permissionFlag == null) {
            uni.hideLoading()
            uni.showToast({
              title: '角色无身份代码 请联系管理员',
              icon: 'none'
            })
            return
          }
          // 5劳资专员-个人 4劳工 3包工头 2劳资专员-项目 1管理员
          // A劳资专员-个人 F劳资专员-项目 B包工头 C劳工
          if (permission == 'admin') {
            uni.setStorageSync('usertype', 1) // 角色身份权限id
            uni.setStorageSync('permission', permission) //登录角色的身份
            // uni.hideLoading()
            // uni.showToast({
            //   title: '账号或密码错误!',
            //   icon: 'none'
            // })
            // return
          } else if (permission.charAt(0) == 'A') {
            uni.setStorageSync('usertype', 5) // 角色身份权限id
            uni.setStorageSync('permission', permission) //登录角色的身份
            // 在项目里登录劳资个人
            if (this.colorid == 1) {
              uni.hideLoading()
              uni.showToast({
                title: '账号不存在或类型错误',
                icon: 'none'
              })
              return
            }
          } else if (permission.charAt(0) == 'F') {
            uni.setStorageSync('usertype', 2) // 角色身份权限id
            uni.setStorageSync('permission', permission) //登录角色的身份
            // 在个人里面登录劳资项目
            if (this.colorid == 0) {
              uni.hideLoading()
              uni.showToast({
                title: '账号不存在或类型错误',
                icon: 'none'
              })
              return
            }
          } else if (permission.charAt(0) == 'B') {
            uni.setStorageSync('usertype', 3) // 角色身份权限id
            uni.setStorageSync('permission', permission) //登录角色的身份
            // 在项目里面登录个人账号
            if (this.colorid == 1) {
              uni.hideLoading()
              uni.showToast({
                title: '账号不存在或类型错误',
                icon: 'none'
              })
              return
            }
          } else if (permission.charAt(0) == 'C') {
            uni.setStorageSync('usertype', 4) // 角色身份权限id
            uni.setStorageSync('permission', permission) //登录角色的身份
            // 在项目里面登录个人账号
            if (this.colorid == 1) {
              uni.hideLoading()
              uni.showToast({
                title: '账号不存在或类型错误',
                icon: 'none'
              })
              return
            }

          }

          console.log('clear');
          clearTimeout(this.timer)
          uni.setStorageSync('userNumber',this.baseFormData.username)
          uni.hideLoading()
          uni.switchTab({
            url: '/pages/example/home/index'
          })
        })


      },
      changecolor(id) {
        this.colorid = id
        if (id == 1) {
          this.countType = 4
        } else if (id == 0) {
          this.countType = 4
        }

      },
      toreset() {
        uni.navigateTo({
          url: './resetPassword'
        })

      },
      ischeck(bool) {
        this.queren = !bool
      }
    },
    onUnload() {
      console.log('清理定时器');
      clearTimeout(this.timer)
    },
    onLoad() {
      // 查询上一次登录的账号
      let userNumber = uni.getStorageSync('userNumber')
      if(userNumber != '' ){
        this.baseFormData.username = userNumber
      }
    }
  }
</script>



<style scoped>
  .privacy {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .privacy-bottom {
    align-items: flex-end;
  }

  .content {
    width: 632rpx;
    padding: 48rpx;
    box-sizing: border-box;
    background: #fff;
    border-radius: 16rpx;
  }

  .content-bottom {
    position: absolute;
    bottom: 0;
    width: 96%;
    padding: 36rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 16rpx 16rpx 0 0;
  }

  .content .title {
    text-align: center;
    color: #333;
    font-weight: bold;
    font-size: 32rpx;
  }

  .content .des {
    font-size: 26rpx;
    color: #666;
    margin-top: 40rpx;
    text-align: justify;
    line-height: 1.6;
  }

  .content .des .link {
    color: #1989ff;
    text-decoration: underline;
  }

  .btns {
    margin-top: 48rpx;
    margin-bottom: 12rpx;
    display: flex;
  }

  .btns .item {
    width: 200rpx;
    height: 72rpx;
    overflow: visible;
    display: flex;
    align-items: center;

    justify-content: center;
    /* border-radius: 16rpx; */
    box-sizing: border-box;
    border: none !important;
  }

  .btns .reject {
    background: #f4f4f5;
    color: #1989ff;
    font-size: 14px;
    background: #edf5fe;
    font-weight: 300;
    margin-right: 16rpx;
  }

  .btns .agree {
    width: 200rpx;
    background: #1989ff;
    color: #fff;
    font-size: 16px;

  }

  .privacy-bottom .btns .agree {
    width: 440rpx;

  }
</style>

<style lang="scss" scoped>
  .ysbox {
    margin: 40rpx;

    .ysname {
      color: #157DFB;
    }
  }

  .auth-btncard {
    .btn-unok {
      width: 50%;
      float: left;
    }

    .btn-ok {
      width: 50%;
      float: left;
      margin: 0;
      padding: 0;
      border: 0px solid transparent; //自定义边框
      outline: none; //消除默认点击蓝色边框效果

      u-button {
        margin: 0;
        padding: 0;
        border: 0px solid transparent; //自定义边框
        outline: none; //消除默认点击蓝色边框效果
      }
    }
  }
</style>

<style lang="scss" scoped>
  /deep/ .is-input-border {
    background-color: #f5f9ff !important;
    flex: 1;
    width: 100% !important;
  }

  /deep/ .new-myinput-but {
    flex: 1 !important;
    width: 100% !important;
  }


  .new-login-box {
    background: linear-gradient(to bottom, #8bbae5 30px, #f5f9ff, transparent 300rpx);
    border: 1px solid #487DE5;
    border-radius: 10rpx;
    position: fixed;
    top: 330rpx;
    left: 40rpx;
    background-color: #f5f9ff;
    width: 670rpx;
    height: fit-content;
    box-sizing: border-box;
    padding-left: 55rpx;
    padding-top: 84rpx;
    padding-right: 60rpx;

    .new-login-but {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #6E81A0;
    }

    .new-title {
      font-size: 32rpx;

      .new-title-text {
        &.active {
          color: #055DFE;
        }
      }
    }

    .new-myinput {
      margin-top: 50rpx;

      .new-myinput-head {
        display: flex;
        align-items: center;
      }

      .new-myinput-but {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 26rpx;
        border-bottom: 1px solid #e2e2e2;

        .my-imput-icon {
          // padding-bottom: 22rpx;
        }
      }
    }
  }


  .icon-text-title {
    margin-left: 10rpx;
  }

  .titileImgae {
    position: fixed;
    top: 90rpx;
    left: 268rpx;
  }

  .fontcolor {
    color: #055dfe;
  }

  .login_header {
    width: 100%;
    height: 520rpx;
    background: url('../../../static/images/mengbanzu.png');
    background-color: #527ee8;
    display: flex;
    justify-content: center;
    align-items: center;

    .img-box {
      width: 268rpx;
      height: 160rpx;
      text-align: center;

      .imgbox {
        width: 268rpx;
        height: 120rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }

      .wenzi {
        position: fixed;
        top: 258rpx;
        left: 343rpx;
        color: white;
        font-size: 32rpx;
      }
    }
  }

  .login-box {
    width: 95%;
    height: fit-content;
    margin: 0 auto;
    font-size: 28rpx;

    .login-info-title {
      width: 95%;
      display: flex;
      align-items: center;
      height: 60rpx;
      color: black;
      margin-top: 40rpx;
      margin-bottom: 50rpx;

      .login-info-title-text {
        width: 140rpx;
        font-size: 32rpx;
      }

    }
  }

  .login_info {
    margin-top: -100rpx;
  }

  /deep/.is-input-border {
    border: none !important;
    // border-bottom: 1px #edf3ff solid !important;

  }

  .submitSalery {
    width: 670rpx;
    height: 92rpx;
    border-radius: 10rpx;
    line-height: 92rpx;
    position: fixed;
    bottom: 300rpx;
    left: 40rpx;
    background-color: #055dfe;
    box-shadow: 3px 0 0 #055dfe;
    color: #fff;
    font-size: 32rpx;
    bottom: 70rpx;

  }

  .icon-text {
    display: flex;
    width: 95%;
    height: fit-content;
    align-items: center;
    height: 36rpx;
    font-size: 32rpx;
    color: black;
    padding-bottom: 20rpx;

    .radio {
      display: inline-block;
      transform: scale(0.6);
    }

    .icon-text-img {
      width: 36rpx;
      height: 36rpx;

      image {
        height: 100%;
        width: 100%;
      }
    }

  }

  /deep/.uni-card {
    background: linear-gradient(#a2bbf4 5%, #eff4fe 20%, #ffffff 25%, #fff 30%);
  }
</style>
